<template>
  <div>
    <h2>当前计数：{{counter}}</h2>
    <button @click="counter++">+1</button>
    <button @click="name='kobe'">修改name</button>
  </div>
</template>

<script>
  import { ref,watchEffect } from "vue"
  export default {
    setup(){
      const counter=ref(0)
      const name=ref("why")
      // 1.watchEffect传入的函数默认会直接被执行
      // 2.在执行的过程中，会自动收集依赖（依赖哪些响应式的数据）
      const stopWatch=watchEffect(()=>{
        console.log("--- watchEffect ---") // 只打印一次
        console.log("--- watchEffect ---",counter.value) // 因为依赖counter，所以多次点击就多次执行watchEffect里面的函数
        console.log("--- watchEffect ---",name.value) // 因为依赖name，所以点击的时候就执行一次watchEffect里面的函数
        // counter大于10的时候就不要监听了
        if(counter.value>10){
          stopWatch()
        }
      })

      return{
        counter,
        name
      }
    }
  }
</script>